<template>
  <div class="welcome box bg">
    <div class="container clmcenter">
      <div class="videobox clmcenter">
        <video
          src="https://cdn.mahelei.com/BASF/media/CN/welcome.mp4"
          initial-time="0"
          poster="https://cdn.mahelei.com/BASF/media/CN/welcome_poster.jpg"
          preload="auto"
          controls
          webkit-playsinline="true"
          x-webkit-airplay="true"
          playsinline="true"
          x5-playsinline="true"
          x5-video-orientation="portraint"
          ref="video"
        ></video>
      </div>
      <div class="jumpbtn clmcenter" @click="videoEnd"><p>跳 过</p></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      playflag: true,
    };
  },
  mounted() {
    let video = this.$refs.video;
    video.addEventListener("ended", this.videoEnd);
    // video.addEventListener("canplay", function () {
    //   video.play();
    // });
  },
  methods: {
    videoEnd() {
      this.$router.replace("/cn/safety");
    },
    // videoTogglePlay() {
    //   let video = this.$refs.video;
    //   if (video.paused) {
    //     video.play();
    //     this.playflag = false;
    //   } else {
    //     video.pause();
    //     this.playflag = true;
    //   }
    // },
  },
};
</script>
<style lang="less" scoped>
.welcome {
  .container {
    .videobox {
      position: relative;
      width: 680px;
      height: 382.5px;
      background: rgba(0, 0, 0, 0.2);
      video {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .play {
        position: absolute;
        width: 80px;
      }
    }
    .jumpbtn {
      margin-top: 3rem;
      cursor: pointer;
      width: 150px;
      height: 42px;
      background: #22a0d4;
      border-radius: 3rem;
      p {
        font-size: 1.6rem;
        color: #ffffff;
      }
    }
  }
}
</style>
